<template>
	<!-- 优惠券领取中心 -->
	<view class="content">
		<!-- 切换分类 start -->
		<view style="height:80rpx">
		<view class="lei_ul">
			<view :class="[lei_li_active === index ? 'lei_li_active lei_li' : 'lei_li']" v-for="(lei,index) in lei" :key="index" @tap="changelei(index)">
				{{lei}}
			</view>
		</view>
		</view>
		<!-- 切换分类 end -->
	
		<view class="" v-if="pancen">
			<view class="con_ul">
				<view class="con_li" v-for="(item,index) in shop">
					<view class="con_li_left" :style="{ 'background' :(item.active ==0 ? '#ff80c0' : '#b3b3b3') }">
						<view class="rao_ul">
							<view class="rao_li"></view>
							<view class="rao_li"></view>
							<view class="rao_li"></view>
							<view class="rao_li"></view>
							<view class="rao_li"></view>
							<view class="rao_li"></view>
							<view class="rao_li"></view>
						</view>
						<text class="radio_top"></text>
						<text class="radio_bt"></text>
						<view class="money">¥{{item.money}}</view>
						<view class="money_asd">满{{item.money_asd}}元可用</view>
					</view>
				<view class="con_li_right">
					<view class="badge">{{item.tiao}}</view>
					<view class="title">{{item.title}}</view>
					<view class="title_asd">{{item.titleasd}}</view>
					<view class="dsa">
						<view class="dsa_left">{{item.sd}}</view>
						<navigator hover-class="none" url=""
						:class="[item.active ==0 ? 'dsa_right' : 'dsa_right dsa_right2']" 
						>{{item.ds}}</navigator>
					</view>
				</view>
			</view>
		</view>
		</view>
		<view class="" v-else>
			<view class="jds">
				<image src="../../static/warm.png" class="warm_img" mode="widthFix"></image>
				<view class="ds">还没有优惠券~</view>
			</view>
		</view>
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>
<script>
    import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data (){
			return{
				topState:false,
				lei_li_active:0,  //默认全部分类
				lei:['全部优惠券'],
				pancen:true,  //为true说明有优惠券，展示有优惠券页面，反之则无
				shop:[  //优惠券集合
					{
						active:0,  //为0是粉红色状态,其他为灰色
						money:1.68,  //优惠券金额
						money_asd:10, //满几元可用
						tiao:'百草味专享', //使用范围
						title:'潮人福利-百草味专享福利', //优惠券标题
						titleasd:'剩余10000/9797张',
						sd:'消费满30立减5，即领取日内3天有效',
						ds:'立即领取'
					},
					{
						active:1,  //为0是粉红色状态,其他为灰色
						money:1.68,  //优惠券金额
						money_asd:10, //满几元可用
						tiao:'代金券', //使用范围
						title:'平台补贴【越南进口红肉菠萝蜜】', //优惠券标题
						titleasd:'消费满10立减6.18，剩余100/0张',
						sd:'即领取日内2天有效',
						ds:'已发完'
					}
				]
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods:{
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
			changelei (index){  //切换分类,更新shop的值，值为空则无订单，
				this.lei_li_active=index;
				  //此处应请求数据更新shop
				if(this.shop.length!=0){  
					this.pancen=true; //为true说明有订单，展示有订单页面，反之则无
				}else{
					console.log(222)
					this.pancen=false; //为true说明有订单，展示有订单页面，反之则无
				}
			},
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.lei_ul{
		width:100%;
		display: flex;
		justify-content:center;
		align-items: center;
		background-color: #fff;
		position: fixed;
		top:0;
		z-index: 9999;
	}
	/* #ifdef H5 */
	.lei_ul{
		top:90rpx;
	}
	/* #endif */
	.lei_li{
		width:50%;
		padding:20rpx 0;
		color:#666;
		text-align: center;
		font-size: 28rpx;
	}
	.lei_li_active{
		color: #ff80c0;
		border-bottom:4rpx solid #ff80c0;
	}
	.loa_con{
		width:90%;
		height:80rpx;
		border:2rpx solid #666;
		border-radius: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin:50rpx auto;
		color:#666;
		font-size:28rpx;
	}
	.mem3_img{
		width:30rpx;
		margin-right:15rpx;
	}
	.jds{
		width:100%;
		display: flex;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
	}
	.warm_img{
		width:150rpx;
	}
	.ds{
		width:100%;
		color:#666;
		text-align: center;
		margin-top:40rpx;
		font-size:28rpx;
	}
	.con_ul{
		width:90%;
		margin:0 auto;
	}
	.con_li{
		width:100%;
		height:180rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	    margin-top:30rpx;
	}
	.con_li_left{
		width:30%;
		height:100%;
		position: relative;
		display: flex;
		flex-wrap:wrap;
		align-items: center;
	}
	.con_li_right{
		width:70%;
		height:100%;
		position: relative;
		display: flex;
		flex-wrap:wrap;
		align-items: flex-start;
		overflow: hidden;
	}
	.badge{
		display: inline-block;
		width:150rpx;
		padding:7rpx 0;
		text-align: center;
		background-color: #ff80c0;
		color:#fff;
		font-size:20rpx;
		transform: rotate(45deg);
	    -webkit-transform-origin: 70rpx 70rpx;
		position: absolute;
		right:0;
		top:0;
	}
	.title{
		width:90%;
		margin:25rpx auto 0;
		font-size:30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.title_asd{
		color:#666;
		font-size:23rpx;
		width:90%;
		margin:0 auto;
		margin-top:-60rpx;
	}
	.dsa{
		position: absolute;
		width:90%;
		left:5%;
		bottom:20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.dsa_left{
		color:#666;
		font-size:23rpx;
	}
	.dsa_right{
		display: inline;
		border:2rpx solid #ff80c0;
		border-radius: 50rpx;
		padding:5rpx 20rpx;
		font-size:23rpx;
		color:#ff80c0;
		white-space: nowrap;
	}
	.dsa_right2{
		color:#666;
		border:2rpx solid #666;
	}
	.radio_top,.radio_bt{
	display: inline-block;
	background-color: #f3f3f3;
	width:20rpx;
	height:20rpx;
	border-radius: 50rpx;
	position: absolute;
	right:-10rpx;
	}
	.radio_top{
		top:-10rpx;
	}
	.radio_bt{
		bottom:-10rpx;
	}
	.rao_ul{
		width:20rpx;
		height:100%;
		display: flex;
		flex-wrap:wrap;
		align-items: center;
		justify-content: flex-start;
		position: absolute;
		left:-10rpx;
	}
	.rao_li{
		display: inline-block;
		background-color: #f3f3f3;
		width:100%;
		height:20rpx;
		border-radius: 50rpx;
	}
	.money{
		color:#fff;
		width:100%;
		text-align: center;
		font-size: 38rpx;
		font-weight:700;
	}
	.money_asd{
		color:#fff;
		text-align: center;
		width:100%;
		margin-top:-80rpx;
	}
</style>
